<template>
    <div>
        <headerMiddle title="我的关注"/>
        <div class="item" v-for="(item,index) of myFollow" :key="index">
            <img :src="item.head_img" alt="" class="avatar">
            <div class="itemMiddle">
                <div class="name">{{item.nickname}}</div>
                <div class="date">2019-10-10</div>
            </div>
            <div class="btnCancel" @click="cancelFollow(item.id)">取消关注</div>
        </div>
    </div>
</template>

<script>
import headerMiddle from '../components/headerMiddle'
export default {
    components:{
        headerMiddle
    },
    data(){
        return {
            // 创建个组接收数据
            myFollow: [],
        }
    },
    methods:{
        // 封装一个发送axios获取数据的方法,获取数据渲染页面
         loadPage(){
             this.$axios({
            url: '/user_follows',
            method: 'GET',
        }).then(res=>{
            console.log(res);
            // 把所需的数据赋值给这个数组
            this.myFollow = res.data.data
            // 在渲染之前，处理判断数据里面图片是否有，有的话加服务器地址加返回的图片地址在页面渲染，没有的话给它一个默认图片
            this.myFollow.forEach(item=>{
                if(!item.head_img){
                    item.head_img = '/static/imgs/touxian.jpg'
                }else{
                    item.head_img=this.$axios.defaults.baseURL + item.head_img
                }
            })
        })
         },
        //  发送阿贾克斯取消关注
        cancelFollow(id){
            console.log(id);
            this.$axios({
                url: '/user_unfollow/' + id,
                method:'get'
            }).then(res=>{
                console.log(res)
                // 提示用户取消关注成功
                this.$toast.success(res.data.message)
                // 调用方法重新渲染页面
                this.loadPage();
            })
        }
    },
    mounted(){
        //挂载完毕调用方法发送阿贾克斯渲染页面
        this.loadPage();
    }

}
</script>

<style lang="less" scoped>
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5.556vw;
        border-bottom: 1px solid #eee;
    }
    .avatar{
        width: 11.111vw;
        border-radius: 5.556vw
    }
    .itemMiddle{
        flex: 1;
        text-align: left;
        padding-left: 2.778vw;
        .date {
            font-size: 3.889vw;
            color: #888;
        }
    }
      .btnCancel {
        height: 8.333vw;
        line-height: 8.333vw;
        padding: 0 2.778vw;
        background: #eee;
        color: #888;
        font-size: 3.889vw;
        border-radius: 4.167vw;
    }
</style>

</style>